<template>
  <div>
    <Header></Header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(n, index) in swiperImgs" :key="index">
        <img :src="n" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="hd">
      <p class="name">防晒系列</p>
      <p class="desc">夏日防晒出行必备</p>
    </div>
    <van-grid :column-num="2" :gutter="10" style="margin-bottom: 1rem">
      <van-grid-item
        v-for="(n, index) in goods_info"
        :key="index"
        @click="todetail(n, index)"
      >
        <img :src="n.imageurl" alt="" />
        <div style="margin-top: 0.5rem">
          <img
            src="https://yanxuan.nosdn.127.net/static-union/1652844771e1f775.png"
            alt=""
            style="width: 1.2rem; margin-right: 0.2rem; margin-bottom: 0.2rem"
          />{{ n.goods_txt }}
        </div>
      </van-grid-item>
    </van-grid>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperImgs: [
        "https://yanxuan.nosdn.127.net/static-union/165191180337b102.jpg",
        "https://yanxuan.nosdn.127.net/6b865f58ebb36a134f76835009f896ed.jpg",
        "https://yanxuan.nosdn.127.net/6ed470c0de9eb8211c1f157970e29102.jpg",
        "https://yanxuan.nosdn.127.net/130c5c3564a757ec4344d71e3a561222.jpg",
      ],
      goods_info: [
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/3eabcd203c5064328b33124205953599.png",
          goods_txt: "CICICURE 长短款冰爽凉感UPF50+防晒皮肤衣女",
          txt: 1,
          swiperImgs: [
            "https://yanxuan-item.nosdn.127.net/9521041e00e36f363215e48352ca0b61.png",
            "https://yanxuan-item.nosdn.127.net/59579a5df15c9d7d79f202262cc01c46.png",
            "https://yanxuan-item.nosdn.127.net/913da60fc8126b401a94ae264123c163.png",
            "https://yanxuan-item.nosdn.127.net/0c300f194da128a3e06086d159959516.png",
            "https://yanxuan-item.nosdn.127.net/a8bc1874927083623620941d839b01c8.png",
          ],
          introduceImgs: [
            "https://yanxuan-item.nosdn.127.net/146cdaab6cd1991a3569578918e8f2c6.jpg",
            "https://yanxuan-item.nosdn.127.net/895320966bd40cc57f035d2014672a12.jpg",
            "https://yanxuan-item.nosdn.127.net/5dd56910aced803198a5452ec7429aa9.jpg",
            "https://yanxuan-item.nosdn.127.net/5581220ad2cf3cdedfe4a3f40eb64f01.jpg",
            "https://yanxuan-item.nosdn.127.net/1fb54d30c82f050b4738e3aec5e0d55a.jpg",
            "https://yanxuan-item.nosdn.127.net/917dcac497b2dea973608e3c631e9718.jpg",
            "https://yanxuan-item.nosdn.127.net/8dbc1ee0cfa56c7bdb2a49c15b3e214b.jpg",
            "https://yanxuan-item.nosdn.127.net/e73b5c9c89429bdaabb8e48e540d3902.jpg",
            "https://yanxuan-item.nosdn.127.net/2fe1f66042dd27ed6c64ec3ac6ac21b0.jpg",
            "https://yanxuan-item.nosdn.127.net/de837ed702c169bf90987a3c2f368bdc.jpg",
            "https://yanxuan-item.nosdn.127.net/91af0a54e83e8ebe740974967caf18a9.jpg",
            "https://yanxuan-item.nosdn.127.net/238f05096c0eb7a811b69520d105e048.jpg",
            "https://yanxuan-item.nosdn.127.net/c6202ee68b84fed5b7733cd3399e5627.jpg",
            "https://yanxuan-item.nosdn.127.net/ee28d5ee18ed0848e4f7357ef011a1b5.jpg",
            "https://yanxuan-item.nosdn.127.net/c73b3af200357f2aa01ba87452b2a5ab.jpg",
            "https://yanxuan-item.nosdn.127.net/c00215eb8ea4a3b0a0ad634a723687ca.jpg",
            "https://yanxuan-item.nosdn.127.net/af3ab572fac5a5ab5f0c6b8731ecc6b8.jpg",
            "https://yanxuan-item.nosdn.127.net/0cea252a281def785950ddab75efc321.jpg",
            "https://yanxuan-item.nosdn.127.net/2ac1f26f92f7cef9ae3101280a6c4746.jpg",
          ],
          tree_v: [
            {
              id: "1",
              name: "CICICURE 长短款冰爽凉感防晒皮肤衣女",
              imgUrl:
                "https://yanxuan-item.nosdn.127.net/9521041e00e36f363215e48352ca0b61.png",
              price: 108800,
            },
          ],
          price: "1088.00",
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/2cd9984c1ae994cc2d787dae940f7e6f.png",
          goods_txt: "防晒必备 清爽夏日 半透 慵懒宽松 T恤UPF50+",
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/9783e04021559b93412be344c7dd42fe.png",
          goods_txt: "子安推荐 冰淇淋般清凉 八喜联名云朵防晒衣",
          txt: 3,
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/308d8223adec4296f706c07611841dad.png",
          goods_txt: "「透气防晒」 男式户外针织皮肤衣 UPF50+",
          txt: 4,
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/98784cc4902017fd709eeb008d9f6e9d.png",
          goods_txt: "「透气防晒」女式户外针织薄外套 UPF50+",
          txt: 5,
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/1dd1e5ecf448801364aa3febda2b9772.png",
          goods_txt: "「轻便防晒」 男式户外运动皮肤衣UPF50+",
        },
      ],
    };
  },
  methods: {
    todetail(n, index) {
      this.$router.push("/detail");
      this.$store.commit("muGoods_info", n);
    },
  },
};
</script>

<style>
</style>